<template>
  <div class="ml-4 mt-4">
    <el-switch
      v-model="switch1"
      active-text="会员"
      inactive-text="非会员"
      active-color="#00FF00"
      inactive-color="#FF0000"
    />
  </div>
  <div class="ml-2 mt-2">
    <el-switch class="ml-4" v-model="switch2" active-text="加载中" :loading="true" />
  </div>
  <div class="ml-2 mt-2">
    <el-switch class="ml-4" v-model="switch3" inactive-text="禁用" :disabled="true" />
  </div>
  <div class="ml-2 mt-2">
    <el-slider v-model="sliderValue"></el-slider>
    <el-slider v-model="value" :format-tooltip="format"></el-slider>
    <el-slider v-model="value" :format-tooltip="format" :step="10" :show-stops="true"></el-slider>
    <el-slider
      v-model="value"
      :format-tooltip="format"
      :step="10"
      :show-stops="true"
      :show-input="true"
    ></el-slider>
    <el-slider
      v-model="value"
      :format-tooltip="format"
      :step="10"
      :show-stops="true"
      :range="true"
    ></el-slider>
    <el-slider class="ml-4" v-model="sliderValue" :marks="marks" style="width: 300px"></el-slider>
  </div>
  <div class="ml-2 mt-6">
    <el-time-picker
      :is-range="true"
      v-model="time"
      range-separator="~"
      :arrow-control="true"
      start-placeholder="开始时间"
      end-placeholder="结束时间"
    >
    </el-time-picker>
  </div>
  <div class="ml-2 mt-6">
    <el-time-picker
      :is-range="true"
      type="daterange"
      v-model="date"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
    >
    </el-time-picker>
  </div>
  <div class="ml-2 mt-6">
    <el-color-picker :show-alpha="true" v-model="color"></el-color-picker>
  </div>
</template>
<script setup>
const switch1 = ref(true)
const switch2 = ref(true)
const switch3 = ref(true)
const sliderValue = ref(50)
const value = ref(20)
const time = ref([])
const date = ref([])
const color = ref('#ff4500')
function format(value) {
  return value + '%'
}
const marks = {
  0: '起点',
  50: '半程啦!',
  90: {
    style: {
      color: '#ff4500',
    },
    label: '就到终点啦',
  },
}
</script>
